<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 操作元素的api -->
    <!-- 获取/修改元素的api -->
    <div class="parent">hello</div>
    <button>点击按钮,改变文本</button>
    <script>

        
        let button = document.querySelector('button');
        //触发此事件,就会调用这个函数
        button.onclick = function(){
            //通过类选择器,选中类parent获取到对应的元素
            let parent = document.querySelector('.parent');
            console.log("原本内容:"+parent.innerHTML);
            //修改parent的内容
             let par = parent.innerHTML =  '似了得了'; 
             console.log("第一次修改的内容:"+par)
             //甚至还能修改标签
             parent.innerHTML = '<input type="text">';
             console.log("第二次修改的内容:"+parent.innerHTML);

             //注意,这里不能是par = '<input type="text">';因为修改的只是par这个变量
        }
    </script>
</body>
</html>